import {defineComponent, h} from "vue";
import draggable from 'vuedraggable'
import render from '@/components/render/render.vue'
import {cloneDeep,uniq} from 'lodash'

export default defineComponent({
    name: "DraggableRender",
    props: {
        list: Array,
        scopeProp:{
            type: Object,
            default: {},
        },
    },
    setup(props, ctx) {

    },
    render(ctx) {
        return h(draggable, {list: ctx.list}, {
            item: ({element,index}) => {
                let classCss = [['ACol'].indexOf(element.name) > -1?'ex-row-drag':'ex-drag']
                if(element.attribute.class){
                    classCss = classCss.concat(element.attribute.class)
                }else{
                    if(element.name == 'ARow'){
                        classCss.push('curd-row-draggable')
                    }
                }
                classCss = uniq(classCss)
                element.attribute.class = classCss
                let events =  {
                    'Mouseenter':event=>{
                        document.querySelectorAll('.ex-drag-hover').forEach(item=>{
                            item.classList.remove('ex-drag-hover')
                        })
                        document.querySelectorAll('.ex-drag-copy').forEach(item=>{
                            item.remove()
                        })
                        document.querySelectorAll('.ex-drag-delete').forEach(item=>{
                            item.remove()
                        })
                        let el = event.target
                        el.classList.add('ex-drag-hover')
                        let span = document.createElement('span')
                        span.className = 'ex-drag-copy'
                        span.innerHTML = '<i class="far fa-copy"></i>'
                        span.onclick = e=>{
                            ctx.list.splice(index,0,cloneDeep(element))
                            ctx.$forceUpdate()
                            e.preventDefault()
                        }
                        el.append(span)
                        span = document.createElement('span')
                        span.className = 'ex-drag-delete'
                        span.innerHTML = '<i class="far fa-trash-alt"></i>'
                        span.onclick = e=>{
                            ctx.list.splice(index,1)
                            ctx.$forceUpdate()
                            e.preventDefault()
                        }
                        el.append(span)
                    },
                    'Mouseleave':e=>{
                        document.querySelectorAll('.ex-drag-hover').forEach(item=>{
                            item.classList.remove('ex-drag-hover')
                        })
                        document.querySelectorAll('.ex-drag-copy').forEach(item=>{
                            item.remove()
                        })
                        document.querySelectorAll('.ex-drag-delete').forEach(item=>{
                            item.remove()
                        })
                    }
                }
                if(element.event){
                    Object.assign(element.event,events)
                }else{
                    element.event = events
                }
                if(['ARow','ACol'].indexOf(element.name) > -1){
                    element.directive = [{name:'RowColSign',value:element.name.replace('A',''),argument:element.name == 'ARow'?'curd-row-position':'curd-col-position'}]
                }
                return h(render, {data: element,scopeProp:ctx.scopeProp})
            }
        })
    }
})